<template>
  <div>
    <div class="bar bar-header item-input-inset search-vin6">
      <label class="item-input-wrapper"><i class="icon ion-ios-search placeholder-icon"></i>
        <form action="" id="von-search-e4k">
          <input type="search" v-model="params.carVin6" placeholder="输入车架号后六位" onkeyup="this.value=this.value.replace(/\W/g,'')" onafterpaste="this.value=this.value.replace(/\W/g,'')" maxlength = 6 >
        </form>
      </label>
      <button class="button button-clear button-positive" @click="onCancel" >Cancel</button>
      </div>
  </div>
</template>
<script>
  export default {
    methods: {
      onSearch () {
        switch (this.params.carVin6.length) {
          case 6:
            this.getData()
            break
          case 0:
            this.onCancel()
            break
          default:break
        }
      },
      onCancel () {
        this.params.carVin6 = ''
        this.$emit('searchOptions', [false])
      },
      getData () {
        this.$emit('searchOptions', [true, this.params.carVin6])
      }
    },
    props: [
      'params'
    ],
    watch: {
      'params.carVin6' () {
        this.params.carVin6.toUpperCase()
        this.onSearch()
      }
    }
  }
</script>
